<template>
  <div>
    <vxe-grid
      ref="xTable"
      border
      resizable
      keep-source
      align="center"
      :edit-rules="validRules"
      :edit-config="{trigger: 'click', mode: 'row', showStatus: true}"
      :toolbar-config="hasAdd?{slots: { buttons: 'toolbar_buttons'}}:false"
      :columns="columns"
      :data="dataSource"
      @checkbox-all="onSelectChange"
      @checkbox-change="onSelectChange"
    >
      <template v-slot:toolbar_buttons v-if="hasAdd">
        <a-button type="primary" icon="plus" style="margin:0px 8px 0px 0px;" @click="handleAdd">新增</a-button>
        <a-dropdown v-if="selectionRows.length > 0">
          <a-menu slot="overlay">
            <a-menu-item key="1" @click="batchDel"><a-icon type="delete" />删除</a-menu-item>
          </a-menu>
          <a-button>批量操作<a-icon type="down" /></a-button>
        </a-dropdown>
      </template>
      <template v-slot:action="{ row }">
        <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(row)">
          <a>删除</a>
        </a-popconfirm>
      </template>
    </vxe-grid>
    <HomeListModal ref="HomeListModal" @ok="modalFormOk"/>
  </div>
</template>
<script >
import HomeListModal from '../modal/HomeListModal'
export default {
  name: 'ContractHousesItemsTable',
  components: {
    HomeListModal
  },
  props: {
    dataSource: {
      type: Array,
      default: () => []
    },
    hasAdd: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      loading: false,
      columns: [
        { type: 'checkbox', width: 50 },
        { type: 'seq', width: 60 },
        { field: 'houseCode', title: '房源号' },
        { field: 'projectName', title: '所属项目' },
        { field: 'buildingName', title: '所属楼宇' },
        { field: 'floor', title: '所属楼层' },
        { field: 'buildingArea', title: '建筑面积（㎡）' },
        { field: 'propertyArea', title: '产权面积（㎡）' }
      ],
      selectionRows: [],
      selectedRowKeys: []
    }
  },
  methods: {
    getTableData() {
      return this.$refs.xTable.getTableData()
    },
    handleAdd() {
      this.$refs.HomeListModal.show()
    },
    handleDelete(row) {
      this.$refs.xTable.remove(row)
    },
    batchDel() {
      this.$refs.xTable.removeCheckboxRow()
    },
    modalFormOk(selectionRows) {
      const codes = []
      this.dataSource.forEach(item => {
        codes.push(item.houseCode)
      })
      selectionRows.forEach(item => {
        if (codes.indexOf(item.houseCode) < 0) {
          this.dataSource.push({
            houseCode: item.houseCode,
            projectName: item.projectName,
            buildingName: item.buildingName,
            floor: item.floor,
            buildingArea: item.buildingArea,
            propertyArea: item.propertyArea
          })
        }
      })
    },
    onSelectChange({ records }) {
      this.selectedRowKeys = []
      records.forEach(item => {
        this.selectedRowKeys.push(item.id)
      })
      this.selectionRows = records
    }
  }
}
</script>
